
<template>
	<view class="container-login">
		<view class="login-top">
			<view class="login-top-view">
				<view class="login-top-back">
					<!-- <uni-icons color="#fff" type="left" size="26" @click="back"></uni-icons> -->
				</view>
				<view class="login-top-text">
					{{$t("账号登录")}}
				</view>
				<view class="login-top-lang">
					<image :src="lang_img" class="loginlang" @click="gotoLang"></image>
				</view>
			</view>
			
		</view>
		<!-- 登录框 -->
		<view class="login-form">
			<view class="tabchange">
				<view class="phone-login" :class="{activeTab:tabnum==0}" @click="tabnum=0">
					{{$t("登录")}}
				</view>
				<view class="email-login" :class="{activeTab:tabnum==1}" @click="tabnum=1">
					{{$t("注册")}}
				</view>
			</view>
			
			<view class="form-view">
				<!-- 登录 -->
				<view class="" v-show="tabnum==0">
					<!-- 手机或邮箱 -->
					<view class="item mt">
						<span  class="icon">
							<image src="../../static/login/2.png" class="width32"></image>
						</span>
						<input v-model="form.phone" v-show="togglePhone"  type="text" :placeholder="$t('请输入手机号')" class="inp">
						<input v-model="form.email" v-show="!togglePhone"  type="text" :placeholder="$t('请输入邮箱')" class="inp">
						<span v-show="togglePhone"  class="toggle-btn" @click="togglebtn">+</span>
						<span v-show="!togglePhone" class="toggle-btn"  @click="togglebtn">-</span>
					</view>
					<!-- 密码 -->
					<view class="item mt1">
						<span  class="icon">
							<image src="../../static/login/3.png" class="width32"></image>
						</span>
						<input  :type="togglepassword" v-model="form.password"  :placeholder="$t('请输入密码')" class="inp">
						<span v-show="togglePwd" class="toggle-btn" @click="togglePwdBtn">
							<image src="../../static/login/4.png" class="eyesIcon"></image>
						</span>
						<span v-show="!togglePwd"  class="toggle-btn"  @click="togglePwdBtn">
							<image src="../../static/login/6.png" class="eyesIcon1"></image>
						</span>
					</view>
					<view class="fogetpwd">
						<view class="">
							<label>
								<checkbox style="transform: scale(0.8);" color="" value="cb" checked="isRemember" />{{$t('记住密码')}}
							</label>
						</view>
						<view class="forgettext">
							<span @click="forgetPwd">{{$t('忘记密码')}}</span>
						</view>
					</view>
				</view>
				<!-- 注册 -->
				<view class="" v-show="tabnum==1">
					<view class="item mt">
						<span  class="icon">
							<image src="../../static/login/2.png" class="width32"></image>
						</span>
						<input v-model="form1.phone" v-show="togglePhone1"  type="text" :placeholder="$t('请输入手机号')" class="inp">
						<input v-model="form1.email" v-show="!togglePhone1"  type="text" :placeholder="$t('请输入邮箱')" class="inp">
						<span v-show="togglePhone1"  class="toggle-btn" @click="togglebtn1">+</span>
						<span v-show="!togglePhone1" class="toggle-btn"  @click="togglebtn1">-</span>
					</view>
					<view class="item mt1">
						<span  class="icon">
							<image src="../../static/login/3.png" class="width32"></image>
						</span>
						<input  :type="togglepassword1" v-model="form1.password"  :placeholder="$t('请输入密码')" class="inp">
						<span v-show="togglePwd1" class="toggle-btn" @click="togglePwdBtn1">
							<image src="../../static/login/4.png" class="eyesIcon"></image>
						</span>
						<span v-show="!togglePwd1"  class="toggle-btn"  @click="togglePwdBtn1">
							<image src="../../static/login/6.png" class="eyesIcon1"></image>
						</span>
					</view>
					<view class="item mt1">
						<span  class="icon">
							<image src="../../static/login/5.png" class="width23"></image>
						</span>
						<input v-model="form1.account" type="text" :placeholder="$t('邀请码')+'('+$t('选填')+')'" class="inp">
						
					</view>
				</view>
			</view>
		</view>
		<view class="login-btn" v-show="tabnum==0" @click="login">
			{{$t("立即登录")}}
		</view>
		<view class="login-btn" v-show="tabnum==1"  @click="register">
			{{$t("立即注册")}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRemember:true,
				togglepassword:'password',
				togglePwd:true,
				togglePhone:true,
				togglepassword1:'password',
				togglePwd1:true,
				togglePhone1:true,
				tabnum:0,
				form:{
					phone:'',
					email:'',
					password:''
				},
				form1:{
					type:1,
					phone:'',
					email:'',
					password:'',
					account:''
				},
				lang_img:""
			}
		},
		onShow() {
			this.lang_img = uni.getStorageSync('language_image') || '/static/lang/en_us.png'
		},
		onLoad(q) {
			if(q.invit_code){
				this.form1.account = q.invit_code
				this.tabnum = 1
			}
		},
		methods: {
			// 切换语言
			gotoLang(){
				uni.navigateTo({
					url:'/pages/lang/lang'
				})
			},
			togglebtn(){
				this.togglePhone=!this.togglePhone;
			},
			togglebtn1(){
				this.togglePhone1=!this.togglePhone1;
			},
			togglePwdBtn(){
				this.togglePwd=!this.togglePwd;
				this.togglepassword = this.togglepassword === 'password' ? 'text' : 'password';
			},
			togglePwdBtn1(){
				this.togglePwd1=!this.togglePwd1;
				this.togglepassword1 = this.togglepassword1 === 'password' ? 'text' : 'password';
			},
			// 登录按钮
			login(){
				let data = {
					type:this.togglePhone == true ? 1 : 2,
					username:this.togglePhone == true ? this.form.phone : this.form.email,
					password:this.form.password,
				}
				this.$http.post(
					'api/login',//接口名
					data//参数合集
				).then(res=>{
					uni.setStorageSync('token',res.data.token)
					uni.showToast({
						icon: 'success',
						title: res.msg
					});
					//登录成功，跳转首页
					setTimeout(function(){
						uni.switchTab({
							url:'/pages/index/index'
						})
					},1500)
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'none',
						title: err.data.message
					});
				})
			},
			// 注册按钮
			register(){
				let data = {
					type:this.togglePhone1 == true ? 1 : 2,
					username:this.togglePhone1 == true ? this.form1.phone : this.form1.email,
					password:this.form1.password,
					invit_code:this.form1.account
				}
				this.$http.post(
					'api/register',//接口名
					data//参数合集
				).then(res=>{
					if(res.code == 200){
						//删除邀请码
						uni.setStorageSync('code',null)
						// 注册接口走成功以后就跳转到登录页
						uni.showModal({
							title: this.$t('提示'),
							content: this.$t('注册成功，前往登录'),
							// cancelText: this.$t('取消'), // 取消按钮的文字  
							confirmText: this.$t('完成'), // 确认按钮文字  
							showCancel: false, // 是否显示取消按钮，默认为 true
							success: (res) => {
								if (res.confirm) {
									this.tabnum = 0
								} else {
									
								}
							}
						})
					}
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'none',
						title: err.data.message
					});
				})
			},
			// 忘记密码
			forgetPwd(){
				uni.navigateTo({
					url:'/pages/login/forgetpwd'
				})
			},
			back(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
		}
	}
</script>

<style>
	.container-login{
		background-color: #fff;
	}
	.login-top{
		width:100%;
		height:732rpx;
		background: url('../../static/login/1.png') no-repeat 50%;
		background-size: 100% 100%;	
	}
	.login-top-view{
		display: flex;
		height:88rpx;
		line-height: 88rpx;
	}
	.login-top-back{
		margin-left:20rpx;
	}
	.login-top-back,.login-top-lang{
		width:20%;
	}
	.login-top-lang{
		text-align: right;
	}
	.login-top-text{
		width:60%;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}
	.loginlang{
		width:72rpx;
		height:72rpx;
		vertical-align: middle;
	}
	.phone-login,.email-login{
		flex:1;
		background-color: #fff;
		font-size:36rpx;
		font-weight: 500;
		color:#999
	}
	.tabchange{
		margin:0 48rpx;
		display: flex;
		justify-content: space-between;
		align-items:center;
		text-align: center;
		height:80rpx;
		line-height:80rpx;
		margin-bottom:40rpx;
		background-color: #fff;
		border-bottom: 1px solid #ccc;	
	}
	.activeTab{
		color:#f12211;
		border-bottom: 2px solid #f12211;
	}
	.login-form{
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4px 9px 2px hsla(0,0%,62.7%,.15);
		border-radius: 13px;
		padding: 62rpx 48rpx 0 48rpx;
		height: 602rpx;
		margin:-610rpx 30rpx 0 30rpx;
		
	}
	.mt{
		height: 136rpx;
		border-bottom: 1px solid #f0f1f3;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		padding-bottom: 8rpx;
		margin-top: 40rpx;
	}
	.mt1{
		height: 136rpx;
		border-bottom: 1px solid #f0f1f3;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
		padding-bottom: 8rpx;
	}
	.icon image{
		width: 64rpx;
		height: 54rpx;
	}
	.inp{
		height: 40rpx;
		margin-left: 14rpx;
		flex: 1;
		margin-bottom: 6rpx;
		font-size:28rpx;
		border:none;
		outline: none;
	}
	/* input::placeholder {
	  color: red!important; 
	} */
	.toggle-btn{
		
	}
	.fogetpwd{
		display: flex;
		justify-content: flex-end;
		font-size:28rpx;
		line-height:46rpx;
		margin-top:40rpx;
	}
	.forgettext{
		flex:1;
		text-align: right;
		color: #0a5;
		font-size:28rpx;
	}
	.login-btn{
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		width: 90%;
		background: linear-gradient(90deg, #e4392e, #ff4d16);
		border-radius: 46rpx;
		color: #fff;
		text-align: center;
		margin: 78rpx auto 0 auto;
	}
	.eyesIcon{
		width:42rpx;
		height:28rpx;
	}
	.eyesIcon1{
		width:42rpx;
		height:46rpx;
	}
	.width32{
		width:64rpx;
		height:54rpx;
	}
	.width23{
		width: 46rpx!important;
		height:40rpx!important;
		padding:0 14rpx;
	}
</style>
